<template>
  <el-card class="statistics-card" shadow="never">
    <template #header>
      <div class="card-header">
        <span class="title">
          <IconifyIconOnline icon="ep:data-analysis" />
          文章统计
        </span>
        <el-button
          type="primary"
          size="small"
          :loading="loading"
          @click="handleRefresh"
        >
          <template #icon>
            <IconifyIconOnline icon="ep:refresh" />
          </template>
          刷新
        </el-button>
      </div>
    </template>

    <div v-loading="loading" class="statistics-content">
      <el-row :gutter="20">
        <!-- 总文章数 -->
        <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="3">
          <div class="stat-item total">
            <div class="stat-icon">
              <IconifyIconOnline icon="ep:document" />
            </div>
            <div class="stat-content">
              <div class="stat-value">
                {{ formatNumber(statistics?.total_count || 0) }}
              </div>
              <div class="stat-label">总文章数</div>
            </div>
          </div>
        </el-col>

        <!-- 已发布 -->
        <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="3">
          <div class="stat-item published">
            <div class="stat-icon">
              <IconifyIconOnline icon="ep:promotion" />
            </div>
            <div class="stat-content">
              <div class="stat-value">
                {{ formatNumber(statistics?.published_count || 0) }}
              </div>
              <div class="stat-label">已发布</div>
            </div>
          </div>
        </el-col>

        <!-- 草稿 -->
        <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="3">
          <div class="stat-item draft">
            <div class="stat-icon">
              <IconifyIconOnline icon="ep:edit" />
            </div>
            <div class="stat-content">
              <div class="stat-value">
                {{ formatNumber(statistics?.draft_count || 0) }}
              </div>
              <div class="stat-label">草稿</div>
            </div>
          </div>
        </el-col>

        <!-- 待审核 -->
        <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="3">
          <div class="stat-item pending">
            <div class="stat-icon">
              <IconifyIconOnline icon="ep:clock" />
            </div>
            <div class="stat-content">
              <div class="stat-value">
                {{ formatNumber(statistics?.pending_count || 0) }}
              </div>
              <div class="stat-label">待审核</div>
            </div>
          </div>
        </el-col>

        <!-- 审核拒绝 -->
        <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="3">
          <div class="stat-item rejected">
            <div class="stat-icon">
              <IconifyIconOnline icon="ep:close" />
            </div>
            <div class="stat-content">
              <div class="stat-value">
                {{ formatNumber(statistics?.rejected_count || 0) }}
              </div>
              <div class="stat-label">审核拒绝</div>
            </div>
          </div>
        </el-col>

        <!-- 已删除 -->
        <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="3">
          <div class="stat-item deleted">
            <div class="stat-icon">
              <IconifyIconOnline icon="ep:delete" />
            </div>
            <div class="stat-content">
              <div class="stat-value">
                {{ formatNumber(statistics?.deleted_count || 0) }}
              </div>
              <div class="stat-label">已删除</div>
            </div>
          </div>
        </el-col>

        <!-- 置顶文章 -->
        <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="3">
          <div class="stat-item top">
            <div class="stat-icon">
              <IconifyIconOnline icon="ep:top" />
            </div>
            <div class="stat-content">
              <div class="stat-value">
                {{ formatNumber(statistics?.top_count || 0) }}
              </div>
              <div class="stat-label">置顶文章</div>
            </div>
          </div>
        </el-col>

        <!-- 总浏览量 -->
        <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="3">
          <div class="stat-item views">
            <div class="stat-icon">
              <IconifyIconOnline icon="ep:view" />
            </div>
            <div class="stat-content">
              <div class="stat-value">
                {{ formatNumber(statistics?.total_views || 0) }}
              </div>
              <div class="stat-label">总浏览量</div>
            </div>
          </div>
        </el-col>
      </el-row>

      <!-- 第二行统计 -->
      <el-row :gutter="20" style="margin-top: 20px">
        <!-- 总点赞数 -->
        <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="3">
          <div class="stat-item likes">
            <div class="stat-icon">
              <IconifyIconOnline icon="ep:star-filled" />
            </div>
            <div class="stat-content">
              <div class="stat-value">
                {{ formatNumber(statistics?.total_likes || 0) }}
              </div>
              <div class="stat-label">总点赞数</div>
            </div>
          </div>
        </el-col>

        <!-- 总评论数 -->
        <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="3">
          <div class="stat-item comments">
            <div class="stat-icon">
              <IconifyIconOnline icon="ep:chat-dot-round" />
            </div>
            <div class="stat-content">
              <div class="stat-value">
                {{ formatNumber(statistics?.total_comments || 0) }}
              </div>
              <div class="stat-label">总评论数</div>
            </div>
          </div>
        </el-col>

        <!-- 发布率 -->
        <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="3">
          <div class="stat-item rate">
            <div class="stat-icon">
              <IconifyIconOnline icon="ep:pie-chart" />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ publishRate }}%</div>
              <div class="stat-label">发布率</div>
            </div>
          </div>
        </el-col>

        <!-- 平均浏览量 -->
        <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="3">
          <div class="stat-item average">
            <div class="stat-icon">
              <IconifyIconOnline icon="ep:trend-charts" />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ averageViews }}</div>
              <div class="stat-label">平均浏览量</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { computed } from "vue";
import type { ArticleStatistics } from "@/api/article-management";
import { ArticleManagementUtils } from "@/api/article-management";

defineOptions({
  name: "ArticleStatistics"
});

// Props
interface Props {
  statistics: ArticleStatistics | null;
  loading?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  loading: false
});

// Emits
const emit = defineEmits<{
  refresh: [];
}>();

// 计算属性
const publishRate = computed(() => {
  if (!props.statistics || props.statistics.total_count === 0) return 0;
  return Math.round(
    (props.statistics.published_count / props.statistics.total_count) * 100
  );
});

const averageViews = computed(() => {
  if (!props.statistics || props.statistics.published_count === 0) return 0;
  const avg = Math.round(
    props.statistics.total_views / props.statistics.published_count
  );
  return ArticleManagementUtils.formatNumber(avg);
});

// 格式化数字
const formatNumber = (num: number) => {
  return ArticleManagementUtils.formatNumber(num);
};

// 刷新统计数据
const handleRefresh = () => {
  emit("refresh");
};
</script>

<style lang="scss" scoped>
// 响应式设计
@media (width <= 768px) {
  .statistics-card {
    .stat-item {
      padding: 16px;

      .stat-icon {
        margin-right: 12px;
        font-size: 28px;
      }

      .stat-content {
        .stat-value {
          font-size: 20px;
        }

        .stat-label {
          font-size: 12px;
        }
      }
    }
  }
}

.statistics-card {
  margin-bottom: 20px;

  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title {
      display: flex;
      gap: 8px;
      align-items: center;
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
  }

  .statistics-content {
    min-height: 120px;
  }

  .stat-item {
    display: flex;
    align-items: center;
    padding: 20px;
    cursor: pointer;
    background: linear-gradient(
      135deg,
      var(--bg-color-start),
      var(--bg-color-end)
    );
    border-radius: 8px;
    box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 4px 16px rgb(0 0 0 / 15%);
      transform: translateY(-2px);
    }

    .stat-icon {
      margin-right: 16px;
      font-size: 32px;
      color: var(--icon-color);
      opacity: 0.8;
    }

    .stat-content {
      flex: 1;

      .stat-value {
        margin-bottom: 4px;
        font-size: 24px;
        font-weight: 700;
        line-height: 1;
        color: var(--text-color);
      }

      .stat-label {
        font-size: 14px;
        color: var(--label-color);
        opacity: 0.8;
      }
    }

    // 不同类型的颜色主题
    &.total {
      --bg-color-start: #667eea;
      --bg-color-end: #764ba2;
      --icon-color: #fff;
      --text-color: #fff;
      --label-color: #fff;
    }

    &.published {
      --bg-color-start: #11998e;
      --bg-color-end: #38ef7d;
      --icon-color: #fff;
      --text-color: #fff;
      --label-color: #fff;
    }

    &.draft {
      --bg-color-start: #ffecd2;
      --bg-color-end: #fcb69f;
      --icon-color: #8b5a2b;
      --text-color: #8b5a2b;
      --label-color: #8b5a2b;
    }

    &.pending {
      --bg-color-start: #ffeaa7;
      --bg-color-end: #fab1a0;
      --icon-color: #d63031;
      --text-color: #d63031;
      --label-color: #d63031;
    }

    &.rejected {
      --bg-color-start: #ff7675;
      --bg-color-end: #fd79a8;
      --icon-color: #fff;
      --text-color: #fff;
      --label-color: #fff;
    }

    &.deleted {
      --bg-color-start: #636e72;
      --bg-color-end: #2d3436;
      --icon-color: #fff;
      --text-color: #fff;
      --label-color: #fff;
    }

    &.top {
      --bg-color-start: #fdcb6e;
      --bg-color-end: #e17055;
      --icon-color: #fff;
      --text-color: #fff;
      --label-color: #fff;
    }

    &.views {
      --bg-color-start: #74b9ff;
      --bg-color-end: #0984e3;
      --icon-color: #fff;
      --text-color: #fff;
      --label-color: #fff;
    }

    &.likes {
      --bg-color-start: #fd79a8;
      --bg-color-end: #e84393;
      --icon-color: #fff;
      --text-color: #fff;
      --label-color: #fff;
    }

    &.comments {
      --bg-color-start: #55a3ff;
      --bg-color-end: #003d82;
      --icon-color: #fff;
      --text-color: #fff;
      --label-color: #fff;
    }

    &.rate {
      --bg-color-start: #a29bfe;
      --bg-color-end: #6c5ce7;
      --icon-color: #fff;
      --text-color: #fff;
      --label-color: #fff;
    }

    &.average {
      --bg-color-start: #00b894;
      --bg-color-end: #00a085;
      --icon-color: #fff;
      --text-color: #fff;
      --label-color: #fff;
    }
  }
}
</style>
